<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转动的时钟效果</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            margin:100px auto;
            background: url("images/clock.jpg") no-repeat;
            position: relative;
        }

        .box div{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left:0;
        }

        div.hour{
            background: url("images/hour.png") no-repeat center center;
        }

        div.minute {
            background: url("images/minute.png") no-repeat center center;
        }

        div.second {
            background: url("images/second.png") no-repeat center center;
        }
    </style>

    <script>
        window.onload = function () {
            var box = document.getElementsByClassName("box")[0];
            var h = box.children[0];
            var m = box.children[1];
            var s = box.children[2];
            getCurrentTime();
            setInterval(getCurrentTime,1000);


            function getCurrentTime() {
                var date = new Date();
                var second01 = date.getSeconds() + date.getMilliseconds()/1000;
                var second02 = date.getSeconds();
                var minute = date.getMinutes() + second01/60;
                var hour = date.getHours()%12 + minute / 60;

                s.style.webkitTransform = "rotate("+second02 * 6+"deg)";
                m.style.webkitTransform = "rotate("+minute * 6+"deg)";
                h.style.webkitTransform = "rotate("+hour * 30+"deg)";
            }
        }
    </script>
</head>
<body>
    <div class="box">
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
</body>
</html>